<template>
<div>
    <el-header class="header">
        <div class="logo">
            <a href="index.html"><img src="https://hpx-pc.oss-cn-beijing.aliyuncs.com/hpxpic/huipiaoxian.svg" alt="logo"></a>
        </div>
        <div class="inline_block">
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                    {{userInfo.role_name}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </el-header>
</div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import { State } from 'vuex-class'

    @Component
    export default class PageHeader extends Vue {
        @State userInfo!:UserInfo;

        // methods
        async handleCommand(command: string) {
            if (command != 'logout') {
                return false;
            }
            let res = await this.logout();
            if (res.status != 200) {
                this.$message(res.msg);
                return false;
            }
            localStorage.removeItem('Authorization')
            localStorage.removeItem('menus')
            localStorage.removeItem('userInfo')
            this.$router.push('/login')
        }

        async logout() {
            return await this.$http.post('user/logout');
        }
    }
</script>

<style scoped lang="scss">
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
        /*margin-bottom: 5px;*/
    }
    .logo{
        height: 60px;
        float: left;
        // margin-right: 12%;
        img{
            margin-top: 1rem;
            height: 35px;
        }
    }
</style>